<template>
  <p>文件位置: src/styles/merak.scss</p>
  <p>已调整对应的 element 变量覆盖</p>
  <el-table class="merak-table-container" :data="data">
    <el-table-column prop="var" label="变量">
      <template #default="{ row }">
        <div class="copy" @click="handleCopy(row.var)">
          <merak-icon size="16">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path
                d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
              />
            </svg>
          </merak-icon>
          <span>{{ row.var }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="value" label="默认值" />
    <el-table-column prop="mean" label="含义" />
  </el-table>

  <Button>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Button>
</template>

<script setup lang="tsx">
import { reactive, nextTick } from "vue";

import { ElTable, ElTableColumn, ElMessage } from "element-plus";

import MerakIcon from "../../../../../components/MerakIcon/index.vue";

import Button from "./components/Button.vue";

import dropWrap from "../../dropWrap.vue";

import Prism from "prismjs";

const data = reactive([
  { var: "--merak-space", value: "10px", mean: "默认页面容器间距" },
  { var: "--merak-padding", value: "20px", mean: "默认页面容器内边距" },
  { var: "--merak-button-padding", value: "6px 20px", mean: "默认按钮内边距" },
  { var: "--merak-button-icon-padding", value: "6px", mean: "默认仅包含 icon 的按钮的内边距" },
  { var: "--merak-button-large-size", value: "32px", mean: "默认大号按钮高度（圆形或方形按钮尺寸）" },
  { var: "--merak-button-size", value: "30px", mean: "默认按钮高度（圆形或方形按钮尺寸）" },
  { var: "--merak-button-small-size", value: "24px", mean: "默认小号按钮高度（圆形或方形按钮尺寸）" },
  { var: "--merak-button-fixed-size", value: "60px", mean: "默认固定悬浮按钮尺寸" },
  { var: "--merak-button-min-width", value: "92px", mean: "默认按钮最小宽度" },
  { var: "--merak-text-size", value: "13px", mean: "默认文字尺寸" },
  { var: "--merak-text-color", value: "#303133/#cfd3dc", mean: "默认文字色彩(亮/暗)" },
  { var: "--merak-icon-size", value: "14px", mean: "默认 icon 的尺寸" },
  { var: "--merak-button-icon-size", value: "20px", mean: "默认仅包含 icon 的按钮（大尺寸）中 icon 的尺寸" },
  { var: "--merak-button-icon-fixed-size", value: "30px", mean: "默认固定悬浮按钮 icon 尺寸" },
  { var: "--merak-icon-space", value: "6px", mean: "默认 icon 与文字的间距" },
  { var: "--merak-aside-width", value: "240px", mean: "默认侧边栏盒子宽度" },
  { var: "--merak-border-color", value: "#e6e6ee/#363637", mean: "默认边框色(亮/暗)" },
  { var: "--merak-rounded", value: "2px", mean: "默认边框圆角" },
  { var: "--merak-shadow", value: "0px 2px 4px 0px #e6e6ee/#363637, 0px -1px 4px 0px #e6e6ee/#363637", mean: "默认阴影(亮/暗)" }
]);

const handleCopy = (text: string) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success("复制成功");
    })
    .catch(() => {
      throw "当前浏览器不支持 copy api";
    });
};

nextTick(() => {
  Prism.highlightAll();
});
</script>

<style scoped>
.copy {
  display: flex;
  align-items: center;
  cursor: pointer;
  & > :not(:first-child) {
    margin-left: 10px;
  }
}
</style>
